<template>
  <div class="gz-nav">
    <span v-for="menu in menus" :key="menu.name" class="gz-nav-item" @click="$emit('MenuClick',menu)">{{ menu.name }}</span>
  </div>
</template>

<script>
export default {
  name: 'gz-nav',
  props:{
    menus:Array
  },
  layout: '',
  data() {
    return {}
  },
  methods: {},

}
</script>

<style lang='scss' scoped>
//@import '~assets/scss/main.scss';
@import "src/assets/scss/main.scss";
$menu-color: #12a7d9;
$menu-height:60px;
.gz-nav {
  width: 240px;
  height: 100%;
  background-color: #ffa2a2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  &-item {
    height: $menu-height;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $menu-color;
    text-underline: none;
    text-decoration: none;
    border-radius: 4px;
    margin: 5px 0;
    cursor: pointer;
    color: #fff;
    transition: all .3s;

    &:active {

    }

    &:hover {
      background-color: #fbc128;
    }
  }
}
</style>
<style lang="scss">
html,body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
</style>
